import { useSetState, useUpdateEffect } from 'ahooks';
import { convertToGeoJSONLineStrings, formatValue } from '@/utils/marketingMap/utils';
import store from '@/assets/map/store.png';
import shop from '@/assets/map/shop.png';

interface dataType {
  lon: string;
  lat: string;
  name: string;
  percent: number;
  drivingTime: number;
  vehicleCount: number;
}

const useMap = (data: any, isAuth: boolean) => {
  const [state, setState] = useSetState<any>({});
  const { map, AMap, loca, Loca, startIcon1, startIcon2, overlayGroup, outLinelayer } = state;
  const onRenderingCompleted = (map: any, AMap: any) => {
    const startIcon1 = new AMap.Icon({
      image: store,
      imageSize: new AMap.Size(40, 40),
    });
    const startIcon2 = new AMap.Icon({
      image: shop,
      imageSize: new AMap.Size(40, 40),
    });

    const overlayGroup = new AMap.OverlayGroup();

    const Loca = (window as any).Loca;

    const loca = new Loca.Container({ map });

    const outLinelayer = new Loca.PulseLineLayer({
      zIndex: 11111,
      opacity: 1,
      visible: true,
      zooms: [2, 22],
    });

    outLinelayer.setStyle({
      altitude: 0,
      lineWidth: 3,
      headColor: '#146968',
      trailColor: 'rgba(20,105,104, 0.2)',
      interval: 0.25,
      duration: 5000,
    });

    setState({
      map,
      AMap,
      loca,
      Loca,
      startIcon1,
      startIcon2,
      overlayGroup,
      outLinelayer,
    });
  };

  useUpdateEffect(() => {
    if (map) {
      if (data) {
        const {chosenStoreData, otherStoreData} = data
        map.setCenter([chosenStoreData.lon, chosenStoreData.lat]);

        overlayGroup.clearOverlays();

        const features = convertToGeoJSONLineStrings(data, true);

        const position = new AMap.LngLat(chosenStoreData.lon, chosenStoreData.lat);

        const centerMarker = new AMap.Marker({
          position,
          zIndex: 14,
          icon: startIcon1,
          offset: new AMap.Pixel(-22.5, -22.5),
        });

        const content = new AMap.Marker({
          position,
          zIndex: 14,
          content: `
            <div class="infoWindow">
              <div class="infoWindow_flex">
                <div class="infoWindow_title">
                  ${isAuth ? chosenStoreData.name : '我的专营店'}
                </div>
                <div class="tooltiptext">${chosenStoreData.name}</div>
              </div>
              <div class="infoWindow_flex">
                <span>流出车辆</span>
                <span style="color:#ff594c">${formatValue(chosenStoreData.vehicleCount)}</span>
              </div>
            <div/>
          `,
          offset: new AMap.Pixel(-100, -80), // 偏移位置
        });

        const markers = otherStoreData.map((item: dataType) => {
          const position = new AMap.LngLat(item.lon, item.lat);
          const startMarker = new AMap.Marker({
            position,
            icon: startIcon2,
            offset: new AMap.Pixel(-25, -25),
          });

          const content = new AMap.Marker({
            position,
            zIndex: 13,
            content: `
              <div class="infoWindow">
                <div class="infoWindow_flex">
                  <div class="infoWindow_title">${item.name}</div>
                  <span>${item.percent + '%'}</span>
                  <div class="tooltiptext">${item.name}</div>
                </div>
                <div style="margin: 2px 0;" class="infoWindow_flex">
                  <span>车程</span>
                  <span>${formatValue(item.drivingTime)}min</span>
                </div>
                <div class="infoWindow_flex">
                  <span>流出保客</span>
                  <span style="color:#1890ff">${formatValue(item.vehicleCount)}</span>
                </div>
              <div/>
            `,
            offset: new AMap.Pixel(-100, -110), // 偏移位置
          });

          return [content, startMarker];
        });

        const outLineSource = new Loca.GeoJSONSource({
          data: {
            type: 'FeatureCollection',
            features,
          },
        });

        outLinelayer.setSource(outLineSource);

        overlayGroup.addOverlays([...markers.flat(), centerMarker, content]);
        loca.add(outLinelayer);
        loca.animate.start();
        map.add(overlayGroup);
      } else {
        loca.clear();
        map.remove([overlayGroup]);
      }
    }
  }, [data, isAuth, map]);

  return { onRenderingCompleted };
};

export default useMap;
